<template>
  <div class="md-example-child md-example-child-picker md-example-child-picker-1">
    <md-picker ref="picker"
               :cols="1"
               :data="list"
               is-view
               :default-index="pickerDefaultIndex"
               is-cascade
               @initialed="onPickerInitialed"
               @change="onPickerConfirm"></md-picker>
  </div>
</template>
<script>
import {Picker} from 'mand-mobile'
// import district from 'mand-mobile/components/picker/demo/data/district'

export default {
  name: 'picker-demo',
  props: {
    list: {
      default () {
        return []
      },
      type: Array
    },
    defaultValue: {
      default: '',
      type: String
    }
  },
  components: {
    [Picker.name]: Picker
  },
  data () {
    return {
      pickerData: [],
      pickerDefaultIndex: [],
      pickerValue: ''
    }
  },
  mounted () {
    this.setDefaultValue()
  },
  methods: {
    // 设置默认的数据
    setDefaultValue () {
      let index = 0
      if (this.list && this.list[0]) {
        let listData = this.list[0]
        for (let i = 0; i < listData.length; i++) {
          if (listData[i].text === this.defaultValue) {
            index = i
          }
        }
      }
      this.pickerDefaultIndex = [index]
    },
    // 初始化数据，返回去
    onPickerInitialed () {
      this.submitFatherInfo()
    },
    // 公共方法，停住滑动后告诉父类当前的选中值
    submitFatherInfo () {
      // 获取组件
      let picker = this.$refs.picker
      // 通知父类
      this.$emit('pickerPause', picker.getColumnValue(0))
    },
    // 获取 值，停止滑动后出发的事件
    onPickerConfirm (columnIndex, itemIndex, value) {
      if (value) {
        this.submitFatherInfo()
      }
    },
    getColumnValue (picker, index) {
      const value = this.$refs.picker.getColumnValue(index)
      delete value.children
    }
  }
}
</script>
